<template>
    <div class="progress-container">
        <FilterSearch
            :searchItems="searchItems"
            @query="handleQuery"
        />
        <AutoTable
            :tableData="tableData"
            :columns="columns"
        />
        <Pagination
            :total="total"
            :pageSize="pageSize"
            :currentPage="currentPage"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </div>
</template>
<script setup>
import './index.css';
import { reactive, ref, markRaw } from 'vue';

import FilterSearch from '@/components/filterSearch/index.vue';
import AutoTable from '@/components/autoTable/index.vue';
import Pagination from '@/components/pagination/index.vue';

import { progressApi } from '@/api';

// FilterSearch params
const searchItems = ref([
    {
      label: '用户名',
      vModel: 'user_name',
      type: 'input',
      initialValue: ''
    },
    {
      label: '课程名称',
      vModel: 'title',
      type: 'input',
      initialValue: ''
    }
]);  
const searchCache = ref({});


// AutoTable params
const tableData = ref([]);
const columns = ref([
    {
      label: '用户名',
      prop: 'user_name',
      width: '140px'
    },
    {
      label: '课程名称',
      prop: 'course_title',
      width: '120px'
    },
    {
      label: '进度',
      prop: 'progress_percentage',
      type: 'progress',
      updateValue: item => item,
      width: '140px'
    },
    {
      label: '最近访问时间',
      prop: 'last_accessed',
      type: 'date',
      format: 'YYYY-MM-DD HH:mm:ss',
      width: '250px'
    },
    {
      label: '最近完成时间',
      prop: 'last_lesson_completed',
      type: 'date',
      format: 'YYYY-MM-DD HH:mm:ss',
      width: '250px'
    },
    {
      label: '总花费时间(分钟)',
      prop: 'total_time_spent',
      width: '140px'
    }
]);

// Pagination params
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);

// filterSearch Api
const handleQuery = async (params) => {
    // 调用接口获取数据
    searchCache.value = params;
    const reqParams = {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        ...params
    }
    const res = await progressApi.getProgress(reqParams);
    if (res.code === 200) {
      tableData.value = res.data.rows;
      total.value = res.data.total;
    }
};
// Pagination Api
const handleSizeChange = (size) => {
    pageSize.value = size;
    handleQuery(searchCache.value);
};
const handleCurrentChange = (page) => {
    currentPage.value = page;
    handleQuery(searchCache.value);

};
</script>